.train{
    width: 100vw;
    height: 100vh;
    color: white;
    //background-color: #b6b696;
  }
  /*
  .content{
    width: 100%;
    height: 100vh;
    //background-color: #bbbbaa;
  }
*/
  .topbar{
    width: 100%;
    height: 5vh;
  }

  .content{
    width: 100vw;
    height: 95vh;
    background-color: #babbbb;
    //position: absolute;
    color: white;
    //left: calc(50% - 35vw);
  }
  .left_introduce{
    width: 25vw;
    height: 95vh;
    background-color: #babbbb;
    float: left;
    box-sizing: border-box;
  }

  .city_introduction{
    width: 100%;
    height: 20vh;
    position: relative;
    //top: 20vh;
    box-sizing: border-box;
    padding: 1vh;
    color: white;
    //background: yellow;
    font-size: 0.4vw;
    border-bottom:1px solid black;
  }
  p{
    text-indent: 2em;
    //color: #5d25bf;
    color: white;
  }

  .left_button{
    width: 100%;
    height: 4vh;
    //background-color: red;
    position: relative;
    top: 21vh;
    //float: left;
  }
  .button{
    width: 15%;
    height: 100%;
    background-color: #707170;
    position: relative;
    //top: 2vh;
    left: calc(50% - 10%);
    //display: flex;
    //justify-content: space-between;
    border-radius: 10px;
    text-align: center;
    line-height: 4vh;
  }
  .button{
    width: 5vw;
    height: 100%;
    background-color: #777575;
    border-radius:10px
  }
  .button:hover{
    border: lime 1px solid;
    color: lime;
    cursor:pointer;
  }


  .game_body{
    width: 50vw;
    height: 94vh;
    /*position: relative;*/
    /*background-color: #e8c579;*/
    float: left;
    margin-top: 0.5vh;
    box-sizing: border-box;
    border-radius: 10px;
    /*border:1px dashed black;*/
  }
  .right_introduce{
    width: 25vw;
    height: 95vh;
    background-color:#babbbb;
    float: right;
    font-size: 0.6vw;
    box-sizing: border-box;
  }
  .county_introduction{
    width: 100%;
    height: 100%;
    /*background-color: aqua;*/
    //position: relative;
    //top: 20vh;
    box-sizing: border-box;
    overflow: hidden;
    //padding: 2vh;
    //text-align: center;
    //line-height: 50vh;
  }


  .examine_right_top{
    width: 100%;
    height: 25%;
    color: white;
    //border-top:solid 1px black;box-sizing: border-box;
    background-color: #14d036;
  }
  .examine_right_top_time{
    width: 100%;
    height: 25%;
    background-color:#babbbb;box-sizing: border-box;
  }
  .examine_right_top_time_content{
    width: 100%;
    height: 100%;
    /*background-color: #c1945f;*/
    //position: relative;
    //left: calc(50% - 10%);
  }

  .examine_right_top_time_text{
    width: 10%;
    height: 100%;
    //background-color: red;
    text-align: center;
    line-height: 6vh;
    float: left;
  }
  .examine_conutTime{
    width: 10%;
    height: 100%;
    color: white;
    //background-color: yellow;
    float: left;
    text-align: center;
    line-height: 6vh;
    //font-size:0.5vw;
  }
/*
  .personal_informations{
    width: 100%;
    height: 75%;
    //background-color: #c1945f;
    box-sizing: border-box;
    padding: 10px;
 */

  .information{
    width: 100%;
    height: 20%;
    //background-color: #5d25bf;
    margin-top: 0.5vh;
    line-height: 3vh;
  }

  .record{
    width: 100%;
    height: 30%;
    /*background-color: #14ee14;*/
    /*border-top: solid black 1px;*/
    /*color: red;*/
    font-size: 0.8vw;

  }
  .record_name{
    font-size: 1vw;
    width: 100%;
    height: 10%;
    box-sizing: border-box;
    /*background-color: #267a1f;*/
    text-align: center;
    /*line-height: 3vh;*/
    font-weight: bolder;
    //border-bottom:black 1px dashed;
    color: black;
  }

  .record_content{
    width: 96%;
    height: 90%;
    background-color: #151414;
    box-shadow: 1px 1px 1px 1px black;
    position: relative;
    left: calc(50% - 48%);
    border: 1px black dashed;
    border-radius: 10PX;
    box-sizing: border-box;
    /*padding: 10px;*/
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;   !* 确保水平滚动 *!*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
  }
  .record_content::-webkit-scrollbar{
    display: none;
  }

  .record_strips{
    width: 100%;
    height: 4.5vh;
    /*background-color: #dedddd;*/
    margin-top: 0.5vh;
    overflow: hidden;
    //text-align: center;
    /*line-height: 3vh;*/
    color:white;
    border-radius: 5px;
    box-sizing: border-box;
    padding-left: 0.5vw;
    font-size: 0.7vw;
    overflow-wrap: normal;
    /*font-weight: bolder;*/
  }

    /*答题记录动态颜色*/
    .status-correct {
      color: #4ace3a; /* 绿色（正确） */
    }
    .status-wrong {
      color: #f32c1c; /* 红色（错误） */
    }

  /*  显示正确的地图*/
  .true_map{
    width: 100%;
    height: 70%;
    /*background-color: yellow;*/
  }
  .true_map_title{
    width: 100%;
    height: 5%;
    /*background-color: chartreuse;*/
    text-align: center;
    line-height: 3vh;
    font-size: 1vw;
    font-weight: bolder;
    color: black;
  }
  .true_map_content{
    width: 100%;
    height: 95%;
    /*background-color: #3b7d0a;*/
  }
  .true_map_county_map{
    width: 96%;
    height: 30vh;
    background-color: #abe256;
    /*float: left;*/
    position: relative;
    left: calc(50% - 48%);
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px dashed black;
    box-shadow: 1px 1px 1px 1px black;
  }
  .true_map_town_map{
    width: 96%;
    height: 30vh;
    background-color: #1c94d5;
    box-sizing: border-box;
    border: 1px dashed black;
    border-radius: 10px;
    position: relative;
    top: 1vh;
    left: calc(50% - 48%);
    box-shadow: 1px 1px 1px 1px black;
  }





  .topic_nav{
    width: 100%;
    height: 20%;
    background-color: #c1945f;
    text-align: center;
    line-height: 4.5vh;
  }
  .topic_nav_content{
    width: 90%;
    height: 75%;
    //background-color: lime;
    position: relative;
    left: calc(50% - 45%);
    border: 1px black dashed;
    border-radius: 10PX;
    box-sizing: border-box;
    padding: 10px;
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
   }
  .topic_nav_content::-webkit-scrollbar{
    display: none;
  }

  .topic_nav_strips{
    width: 100%;
    height: 5vh;
    /*background-color: lime;*/
    margin-top: 0.5vh;
     color: white;
  }


  .personal_informations{
    width: 95%;
    height: 20%;
    position: relative;
    left: calc(50% - 47.5%);
    background-color: #56b1d9;
    overflow: hidden;
    margin-top: 0.5vh;
    box-sizing: border-box;
    border-radius: 10px;
    border: dashed black 1px;
    box-shadow: 1px 1px 1px 1px #151414;
  }

  .personal_informations_left{
    width: 50%;
    height: 100%;
    float: left;
    /*background-color: #0ca0e0;*/
    box-sizing: border-box;
    padding-left: 10px;
    word-break: break-all;
  }
  .personal_informations_right{
    width: 50%;
    height: 100%;
    //float: left;
    margin-left: 50%;
    /*background-color: #0ca0e0;*/
  }
  .examine_name{
    width: 100%;
    height: 24%;
    /*background-color: #267a1f;*/
    line-height: 4vh;
    margin-top: 0.1vh;
    font-size: 0.7vw;
    /*font-size: clamp(7px,1.2vw,15px);*/
    //border-radius: 10px;
    word-break: break-all;
    box-sizing: border-box;
    //border-bottom: 1px black dashed;
  }
  .examine_map_name{
    width: 200%;
  }
  .examine_name p{
    font-size: clamp(7px,1.2vw,12px);
  }

  .examine_time{
    width: 50%;
    height: 100%;
    float: left;
    //background-color: lime;
  }

  .examine_time_tip{
    width: 100%;
    height: 50%;
    //background-color: #5d25bf;
    text-align: center;
    line-height: 15vh;
    font-size: 1vw;
  }
  .examine_time_count{
    width: 90%;
    height: 30%;
    position: relative;
    left: calc(50% - 45%);
    /*background-color: #c1945f;*/
    font-size: clamp(7px,1vw,26px);
    text-align: center;
    line-height: 5vh;
    color: greenyellow;
    font-weight: bolder;
  }
  .button_tip{
    width: 100%;
    height: 20%;
    text-align: center;
    line-height: 3vh;
    font-size: 0.8vw;
    //background-color: red;
    display: none;
    color: yellow;
  }
  .examine_time_count_button:hover{
    cursor:pointer;
    border: 1px dashed yellow;
    border-radius: 10px;
  }
  .examine_time_count_button:hover + .button_tip{
    display: block;
  }

  .examine_grade{
    width: 50%;
    height: 100%;
    float: right;
   /*background-color: red;*/
  }

  .mall_map{
    width: 95%;
    height: 76%;
    background-color: #70dede;
    position: relative;
    left: calc(50% - 47.5%);
    top: 1vh;
    border-radius: 10px;
    border: dashed black 1px;
    overflow: hidden;
    box-shadow: 1px 1px 1px 1px black;
  }




  .time_countdown_pop{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    /*color: black;*/
  }
  .time_countdown_pop_content{
    width: 30vw;
    height: 25vh;
    /*color: black;*/
    background-color: #0f100f;
    box-shadow: 2px 2px 2px 2px #a89d82;
    position: relative;
    top: 25vh;
    left: calc(50% - 15vw);
    border-radius: 15px;
    overflow: hidden;
  }
  .time_countdown_pop_top{
    width: 100%;
    height: 80%;
    /*background-color: greenyellow;*/
  }
  .time_countdown_pop_top_tip{
    width: 100%;
    height: 30%;
    font-weight: bolder;
    font-size: clamp(7px,1vw,23px);
    /*background-color: #267a1f;*/
    text-align: center;
    box-sizing: border-box;
    padding-top: 1.4vh;
    color: #08d713;
    border-bottom:1px solid black;
  }
  .time_countdown_pop_top_text{
    width: 100%;
    height: 70%;
    /*color: black;*/
    /*font-size: clamp(7px,0.54vw,25px);*/
    font-size: 0.48vw;
    /*background-color: #c1945f;*/
    box-sizing: border-box;
    padding: 5px;
    /*font-size: clamp(7px,0.45vw,13px);*/
    /*border-bottom: 1px dashed black;*/
  }
  .time_countdown_pop_bottom{
    width: 100%;
    height: 20%;
    /*background-color: #267a1f;*/
  }
  .time_countdown_pop_bottom_buttons{
    width: 70%;
    height: 90%;
    /*background-color: yellow;*/
    position: relative;
    left: calc(50% - 35%);
    display: flex;
    justify-content: space-between;
  }
  .time_countdown_pop_bottom_button{
    width: 40%;
    height: 90%;
    margin-top: 0.4vh ;
    background-color: #5a5958;
    text-align: center;
    line-height: 4.3vh;
    box-sizing: border-box;
    border: 1px solid black;
    border-radius: 10px;
  }
  .time_countdown_pop_bottom_button:hover{
    background-color: #abd513;
    cursor:pointer;
    /*box-shadow: 1px 1px 1px 1px black;*/
    /*box-sizing: border-box;*/
    position: relative;
    top: 2px;
    left: 2px;
    box-shadow: 1px 1px 1px 1px #0ae80a;
    color: black;
  }
  .time_countdown_pop_bottom_button:active{
    background-color: #8ba17e;
  }



  .end_examine_pop_content{
    width: 20vw;
    height: 17vh;
    background-color: #709dbf;
    position: relative;
    top: 30vh;
    left: calc(50% - 7.5vw);
    border-radius: 15px;
    overflow: hidden;
    /*font-size: clamp(7px,0.45vw,16px);*/
    font-size: 0.6vw;
    box-shadow: 2px 2px 2px 2px greenyellow;
  }
  .end_examine_pop_content_tip{
    width: 100%;
    height: 20%;
    /*background-color: #c1945f;*/
    text-align: center;
    line-height: 3vh;
    font-size: 0.9vw;
    border-bottom: 1px solid black;
  }
  .end_examine_pop_content_text{
    width: 100%;
    height: 55%;
    /*background-color: #529e2b;*/
    box-sizing: border-box;
    padding: 10px;
    font-size: clamp(7px,0.45vw,16px);
    font-size: 0.8vw;
    border-bottom: 1px dashed black;
  }
  .end_examine_pop_content_buttons{
    width: 100%;
    height: 25%;
    /*background-color: #722687;*/
  }
  .end_examine_pop_content_button{
    width: 30%;
    height: 80%;
    background-color: #575654;
    position: relative;
    top: 0.4vh;
    left: calc(50% - 15%);
    border-radius: 10px;
    text-align: center;
    line-height: 3.2vh;
    font-size: 0.8vw;
    box-sizing: border-box;
    border: solid black 1px ;
  }
  .end_examine_pop_content_button:hover{
    background-color: #1ce236;
    cursor:pointer;
    margin-top: 2px;
    margin-left: 2px;
    /*box-shadow: 1px 1px 1px 1px black;*/
    /*box-sizing: border-box;*/
    /*position: relative;*/
    /*top: 2px;*/
    /*left: 2px;*/
  }
  .end_examine_pop_content_button:active{
    background-color: #5ef308;
  }


  .topic{
    width: 70%;
    height: 9vh;
    /*background-color: red;*/
    float: left;
    position: relative;
    top: 0;
    left: calc(50% - 35%);
    text-align: center;
    line-height: 9vh;
    color: #f50808;
    font-size:1vw;
    font-weight: bolder;
  }

  .answer_pop{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    /*overflow: hidden;*/
    /*float: left;*/
    position: relative;
    top: -95vh;
  }
  .answer_content{
    width: 10vw;
    height: 10vh;
    background-color: white;
    border-radius: 10px;
    position: relative;
    top: 30vh;
    left: calc(50% - 5vw);
    overflow: hidden;
    color: black;
    box-shadow: 1px 1px 1px 1px black;
  }
  .answer_content_text{
    width: 100%;
    height: 50%;
    /*background-color: yellow;*/
    text-align: center;
    line-height: 5vh;
  }
  .answer_content_buttons{
    width: 100%;
    height: 50%;
    /*background-color: green;*/
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
.button_cancel,
.button_sure{
  width: 40%;
  height: 70%;
  background-color: greenyellow;
  text-align: center;
  line-height: 3.5vh;
  border-radius: 10px;
  box-shadow: 1px 1px 1px 1px black;
}
.button_cancel:hover,
.button_sure:hover{
   cursor: pointer;
  background-color: #abe256;
  box-sizing: border-box;
  border: 1px solid #11d781;
}
.button_cancel:active,
.button_sure:active{
  color: white;
  background-color: #10f363;
  border: 2px solid #abe256;
}


.game_body .tips{
  width: 50vw;
  height: 3vh;
  /*background-color: #070707;*/
  position: absolute;
  top: 96.5vh;
  color: #0b8be7;
  font-size: 0.4vw;
  box-sizing: border-box;
  padding-left: 10px;
  font-weight: bolder;
}

.exit_sure_content_tip{
    width: 100%;
    height: 20%;
    /*background-color: #c1945f;*/
    text-align: center;
    line-height: 3vh;
    font-size: 0.9vw;
    border-bottom: 1px solid black;
}


.countdown_Time_pause{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  /*overflow: hidden;*/
  /*float: left;*/
  position: relative;
  top: -94vh;
  border-radius: 10px;
}



.exit_sure{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
}

.exit_sure_content{
    width: 20vw;
    height: 17vh;
    background-color: #709dbf;
    position: relative;
    top: 30vh;
    left: calc(50% - 7.5vw);
    border-radius: 15px;
    overflow: hidden;
    /*font-size: clamp(7px,0.45vw,16px);*/
    font-size: 0.6vw;
    box-shadow: 2px 2px 2px 2px greenyellow;
}
.exit_sure_content_tip{
    width: 100%;
    height: 20%;
    /*background-color: #c1945f;*/
    text-align: center;
    line-height: 3vh;
    font-size: 0.9vw;
    border-bottom: 1px solid black;
}

.exit_sure_content_text{
    width: 100%;
    height: 55%;
    /*background-color: #529e2b;*/
    box-sizing: border-box;
    padding: 10px;
    font-size: clamp(7px,0.45vw,16px);
    font-size: 0.8vw;
    /*border-bottom: 1px dashed black;*/
}
.exit_sure_content_buttons{
    width: 100%;
    height: 25%;
    display: flex;
    justify-content: space-around;
    /*background-color: #722687;*/
  }
  .exit_sure_content_button{
    width: 30%;
    height: 80%;
    background-color: #575654;
    border-radius: 10px;
    text-align: center;
    line-height: 3.2vh;
    font-size: 0.8vw;
    box-sizing: border-box;
    border: solid black 1px ;
  }
  .exit_sure_content_button:hover{
    background-color: #1ce236;
    cursor:pointer;
    /*margin-top: 2px;*/
    /*margin-left: 2px;*/
    /*box-shadow: 1px 1px 1px 1px black;*/
    /*box-sizing: border-box;*/
    /*position: relative;*/
    /*top: 2px;*/
    /*left: 2px;*/
  }
  .exit_sure_content_button:active{
    background-color: #5ef308;
  }

